<template>
	<view class="my-info">
		<!-- 签到 -->
		<view
			v-if="!isSignIn"
			class="sign-in"
			@click="onclickSignIn"
		>
			<u-icon
				name="Sign"
				custom-prefix="icon"
				size="35"
				color="#ffffff"
			/>
		</view>
		<view class="part1">
			<!-- 头像 -->
			<view class="avatar">
				<aha-avatar
					:src="avatarUrl"
					size="80"
					circle
					@click="onclickAvatar"
				/>
			</view>
			<!-- 右侧 -->
			<view class="right">
				<!-- 昵称 -->
				<view class="name strong">{{nickname}}</view>
				<!-- 经验 -->
				<view class="empirical">
					<aha-user-level
						width="300"
						:point="ahaPoint"
					/>
				</view>
				<!-- 技能方向 -->
				<view
					class="education"
					@click="$router.navigateToMyInfo"
				>
					<view>技能方向:&emsp;{{major}}</view>
					<u-icon
						class="arrow-right"
						name="arrow-right"
						size="32"
					/>
				</view>
				<!-- 签到和详细资料 -->
			</view>
		</view>
		<!-- 标签 -->
		<view
			v-if="false"
			class="part2"
			@click="selectingTags=true"
		>
			<AhaTags
				:tags="userTags | splitTags(',')"
				padding="3px 10px"
				fontSize="26"
				margin="0 15px 5px 0"
			/>
		</view>
		<!-- 成就展示 -->
		<!-- <view class="part3">
			成就
		</view> -->
		<!-- 数据量 -->
		<view class="part4">
			<view
				class="item"
				v-for="data in myData"
				:key="data.label"
				@click="onclickLink(data.clickCb)"
			>
				<view class="value">{{data.value | countFilter}}</view>
				<view class="label">{{data.label}}</view>
			</view>
		</view>
		<SelectInterest
			v-if="selectingTags"
			@finish="myInfo=$event"
			@close="selectingTags=false"
		/>
	</view>
</template>

<script>
import { putMe, checkDaySignIn, daySignIn } from '@/api/user.js'
import { getPublicSignature } from '@/api/system.js'
import { getUserInfo, setUserInfo, getUserStatistic } from '@/utils/user'
import { SelectInterest } from './SelectInterest'
export default {
  components: {
    SelectInterest
  },
  data() {
    return {
      myInfo: getUserInfo(),
      avatarUrl: '', // 头像
      nickname: '', // 昵称
      ahaPoint: 0, // Aha币
      major: '', // 专业
      myData: [
        { label: '关注', value: 0, clickCb: () => this.$router.navigateToUserList('follower') },
        { label: '粉丝', value: 0, clickCb: () => this.$router.navigateToUserList('fan') },
        { label: '我的项目', value: 0, clickCb: () => this.$router.navigatorMyProject() },
      ],
      selectingTags: false, // 打开选择标签弹窗
      isSignIn: true, // 是否已经签到
    }
  },
  computed: {
    /**
		 * 计算用户标签
		 */
    userTags() {
      const myInfo = this.myInfo.userInfo
      const compTags = myInfo.compTags || ''
      const specialtyTags = myInfo.specialtyTags || ''

      if (compTags || specialtyTags) {
        return `${ compTags },${ specialtyTags }`

      }
      return '点击选择个性标签'
    }
  },
  methods: {
    /**
     * 初始化数据
     */
    async initData() {
      this.myInfo = getUserInfo()
      console.log(this.myInfo)
      this.$setData({
        avatarUrl: this.myInfo.userInfo.avatarUrl,
        nickname: this.myInfo.userInfo.nickname,
        ahaPoint: this.myInfo.ahaPoint,
        major: this.myInfo.userInfo.major || '未填写',
      })
      /* 判断是否签到 */
      this.isSignIn = await checkDaySignIn(this.myInfo.userInfo.userId)

      this.loadStatistic()
    },
    /**
     * 点击跳转
     */
    onclickLink(link) {
      link()
    },
    /**
     * 加载统计数据
     */
    async loadStatistic() {
      const res = await getUserStatistic()

      this.myData[ 0 ].value = res.followerLen
      this.myData[ 1 ].value = res.fanLen
      this.myData[ 2 ].value = res.totalProject
    },
    /**
     * 点击签到
     */
    async onclickSignIn() {
      this.$loading()
      try {
        const res = await daySignIn(this.myInfo.userInfo.userId)

        this.$msg(`连续签到${ res.continuousDays }天，获得${ res.ahaPoint }Aha点`)
        setUserInfo({
          ahaPoint: this.ahaPoint + res.ahaPoint
        })
        this.initData()
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    },
    /**
		 * 点击头像，调用menu弹窗，可以预览头像，修改头像，进入个人主页
		 */
    async onclickAvatar() {
      /* 进入操作菜单 */
      const res = await this.$menuPicker(['使用微信头像与昵称', '预览头像', '修改头像', '个人主页'])

      switch (res) {
        case '使用微信头像与昵称':
          const res = await uni.getUserProfile({
            desc: '用于完善会员资料'
          })

          if (res[ 1 ]) {
            const info = res[ 1 ].userInfo

            putMe({
              avatarUrl: info.avatarUrl,
              nickname: info.nickName
            })

            this.avatarUrl = info.avatarUrl
            this.nickname = info.nickName

            this.myInfo = setUserInfo({
              userInfo: {
                ...this.myInfo.userInfo,
                avatarUrl: this.avatarUrl,
                nickname: this.nickname,
              }
            })
            this.$msg('更新资料成功')
          }
          break
        case '预览头像':
          this.$readImgs([this.avatarUrl])
          break
        case '修改头像':
          this.changeAvatar()
          break
        case '个人主页':
          this.$router.navigateToUserHome(this.myInfo.userInfo.userId)
      }
    },
    /**
		 * 修改头像
		 */
    async changeAvatar() {
      this.$loading()
      try {
        /* 选择图片 */
        const url = await this.$chooseImage()

        /* 获取签名 */
        const sign = await getPublicSignature(`${ Date.now() }.JPG`)
        /* 上传图片 */
        const upImg = await this.gUploadFile(url[ 0 ], sign)

        /* 更新用户信息 */
        putMe({
          avatarUrl: upImg.header.Location
        })
        /* 更新页面内容 */
        this.avatarUrl = upImg.header.Location
        this.myInfo = setUserInfo({
          userInfo: {
            ...this.myInfo.userInfo,
            avatarUrl: this.avatarUrl
          }
        })
        this.$msg('修改头像成功!')
      } catch (err) {
        console.error(err)
      }
      this.$hideLoading()
    },
  }
}
</script>

<style lang="scss" scoped>
.my-info {
  position: relative;

  /* 签到 */
  .sign-in {
    position: absolute;
    top: -50rpx;
    right: -70rpx;
    width: 90rpx;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    background-color: $primary1;
    border-radius: 50%;
    animation: shake-slow 4s infinite ease-in-out;
  }

  /* 头像 & 昵称 & 经验 & 学校专业 */
  .part1 {
    display: flex;

    .avatar {
      transform: translateY(-20px);
    }

    .right {
      flex: 1;
      min-width: 0;
      margin-left: 34rpx;

      .name {
        font-size: 34rpx;

        @include textEllipsis(1);
      }

      .empirical {
        display: flex;
        align-items: center;
        margin: 5px 0;
        font-size: $sMini;
      }

      .education {
        position: relative;
        font-size: $sSmall;

        .arrow-right {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
      }
    }
  }

  /* 标签 */
  .part2 {
    padding: 10px 0;
  }

  /* 数据 */
  .part4 {
    margin-top: 10px;

    .item {
      display: inline-block;
      width: 33.333%;
      text-align: center;

      .value {
        font-size: 56rpx;
        font-weight: bold;
      }

      .label {
        font-size: $sMini;
      }
    }
  }
}

@keyframes shake-slow {
  2% { transform: translate(6px, -2px) rotate(3.5deg); }
  4% { transform: translate(5px, 8px) rotate(-0.5deg); }
  6% { transform: translate(6px, -3px) rotate(-2.5deg); }
  8% { transform: translate(4px, -2px) rotate(1.5deg); }
  10% { transform: translate(-6px, 8px) rotate(-1.5deg); }
  12% { transform: translate(-5px, 5px) rotate(1.5deg); }
  14% { transform: translate(4px, 10px) rotate(3.5deg); }
  16% { transform: translate(0, 4px) rotate(1.5deg); }
  18% { transform: translate(-1px, -6px) rotate(-0.5deg); }
  20% { transform: translate(6px, -9px) rotate(2.5deg); }
  22% { transform: translate(1px, -5px) rotate(-1.5deg); }
  24% { transform: translate(-9px, 6px) rotate(-0.5deg); }
  26% { transform: translate(8px, -2px) rotate(-1.5deg); }
  28% { transform: translate(2px, -3px) rotate(-2.5deg); }
  30% { transform: translate(9px, -7px) rotate(-0.5deg); }
  32% { transform: translate(8px, -6px) rotate(-2.5deg); }
  34% { transform: translate(-5px, 1px) rotate(3.5deg); }
  36% { transform: translate(0, -5px) rotate(2.5deg); }
  38% { transform: translate(2px, 7px) rotate(-1.5deg); }
  40% { transform: translate(6px, 3px) rotate(-1.5deg); }
  42% { transform: translate(1px, -5px) rotate(-1.5deg); }
  44% { transform: translate(10px, -4px) rotate(-0.5deg); }
  46% { transform: translate(-2px, 2px) rotate(3.5deg); }
  48% { transform: translate(3px, 4px) rotate(-0.5deg); }
  50% { transform: translate(8px, 1px) rotate(-1.5deg); }
  52% { transform: translate(7px, 4px) rotate(-1.5deg); }
  54% { transform: translate(10px, 8px) rotate(-1.5deg); }
  56% { transform: translate(-3px, 0) rotate(-0.5deg); }
  58% { transform: translate(0, -1px) rotate(1.5deg); }
  60% { transform: translate(6px, 9px) rotate(-1.5deg); }
  62% { transform: translate(-9px, 8px) rotate(0.5deg); }
  64% { transform: translate(-6px, 10px) rotate(0.5deg); }
  66% { transform: translate(7px, 0) rotate(0.5deg); }
  68% { transform: translate(3px, 8px) rotate(-0.5deg); }
  70% { transform: translate(-2px, -9px) rotate(1.5deg); }
  72% { transform: translate(-6px, 2px) rotate(1.5deg); }
  74% { transform: translate(-2px, 10px) rotate(-1.5deg); }
  76% { transform: translate(2px, 8px) rotate(2.5deg); }
  78% { transform: translate(6px, -2px) rotate(-0.5deg); }
  80% { transform: translate(6px, 8px) rotate(0.5deg); }
  82% { transform: translate(10px, 9px) rotate(3.5deg); }
  84% { transform: translate(-3px, -1px) rotate(3.5deg); }
  86% { transform: translate(1px, 8px) rotate(-2.5deg); }
  88% { transform: translate(-5px, -9px) rotate(2.5deg); }
  90% { transform: translate(2px, 8px) rotate(0.5deg); }
  92% { transform: translate(0, -1px) rotate(1.5deg); }
  94% { transform: translate(-8px, -1px) rotate(0.5deg); }
  96% { transform: translate(-3px, 8px) rotate(-1.5deg); }
  98% { transform: translate(4px, 8px) rotate(0.5deg); }

  0%,
  100% { transform: translate(0, 0) rotate(0); }
}
</style>
